<template>
  <div class="imgHeaper">
    <label :for="id" />
    <div :id="id+'Close'" :class="[close,closeShow]" @click="removeImgUrl()">X</div>
    <input :id="id" type="file" accept="image/*" @change="handChange()">
    <div :class="[loading,loadingVisbase]" />
    <el-image
      :id="id+'CurrrentImg'"
      :class="[currentImg,closeShow]"
      :src="currentImgUrl"
      :preview-src-list="[currentImgUrl]"
    />
  </div>
</template>
<script>
import { cloud_md5, cloudbaseUpload, development } from '@/cloudbaseapi/cloudbase-api'
export default {
  props: {
    id: {
      type: String,
      default: '',
      require: true
    },
    src: {
      type: String,
      default: '',
      require: true
    }
  },
  data() {
    return {
      closeShow: 'show',
      close: 'close',
      defaultImg: 'data:image/svg+xml;utf8,%3Csvg%20class%3D%22icon%22%20style%3D%22width%3A%201em%3Bheight%3A%201em%3Bvertical-align%3A%20middle%3Bfill%3A%20currentColor%3Boverflow%3A%20hidden%3B%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M448%200h128v1024H448z%22%20fill%3D%22%23B5B5B5%22%20%2F%3E%3Cpath%20d%3D%22M1024%20448v128H0V448z%22%20fill%3D%22%23B5B5B5%22%20%2F%3E%3C%2Fsvg%3E',
      loading: 'loading',
      loadingVisbase: 'hide',
      currentImgUrl: '',
      currentImg: 'currentImg',
      uploadPath: ''
    }
  },
  watch: {
    src: function(newVal) {
      console.log('当前监听scr的传值=>', newVal)
      this.currentImgUrl = newVal
      this.$nextTick(() => {
        this.closeShow = 'show'
      })
    }
  },
  mounted() {
    const { UPLOADPATH } = development()
    this.uploadPath = UPLOADPATH
    this.closeShow = 'hide'
  },
  methods: {
    handChange() {
      const locafile = document.getElementById(this.id).files[0]
      this.uploadFile(locafile)
    },
    uploadFile(localFile) {
      const ext = localFile.name.split('.')[1]
      const cloudFile = this.uploadPath + cloud_md5(Date.now()) + '.' + ext
      this.loadingVisbase = 'show'
      cloudbaseUpload(cloudFile, localFile).then(res => {
        const download_url = res.download_url
        this.currentImgUrl = download_url
        this.$nextTick(() => {
          this.closeShow = 'show'
          this.loadingVisbase = 'hide'
        })
        this.$emit('imgheaperchange', download_url)
      }).catch(err => {
        console.log(err)
      })
    },
    removeImgUrl() {
      this.currentImgUrl = this.defaultImg
      this.$nextTick(() => {
        this.closeShow = 'hide'
      })
      this.$emit('imgheaperclose')
    }
  }
}
</script>

<style scoped lang="scss">
  .imgHeaper{
    position:relative;
    $defaultUploadImg: url('data:image/svg+xml;utf8,%3Csvg%20class%3D%22icon%22%20style%3D%22width%3A%201em%3Bheight%3A%201em%3Bvertical-align%3A%20middle%3Bfill%3A%20currentColor%3Boverflow%3A%20hidden%3B%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M448%200h128v1024H448z%22%20fill%3D%22%23B5B5B5%22%20%2F%3E%3Cpath%20d%3D%22M1024%20448v128H0V448z%22%20fill%3D%22%23B5B5B5%22%20%2F%3E%3C%2Fsvg%3E');
    $color:#B5B5B5;
    width:150px;
    height: 150px;
    label{
      width:100%;
      height: 100%;
      border:2px dashed $color;
      display: block;
      background-image:$defaultUploadImg;
      background-repeat: no-repeat;
      background-position: center;
      background-size:80%;
      border-radius: 10px;
    }
    .currentImg {
      width:100%;
      height: 100%;
      background-color:#fff;
      background-repeat: no-repeat;
      background-position: center;
      background-size:80%;
      border-radius: 10px;
      position:absolute;
      top:0px;left:0px;
      border:2px dashed $color;
    }
    input{
      display: none;
    }
    .close{
      position:absolute;
      right:-10px;
      top:-10px;
      width:20px;height: 20px;
      background-color:red;
      border-radius: 10px;
      text-align: center;
      line-height: 20px;
      color:$color;
      cursor:pointer;
      z-index: 10;
    }
    .show{
      display: block;
    }
    .hide{
      display: none;
    }
    .loading{
      width:100%;
      height: 100%;
      position:absolute;
      top:0;
      left:0;
      background-color:transparent;
      background-image:url("data:image/svg+xml;utf8,%3Csvg%20class%3D%22icon%22%20style%3D%22width%3A%201em%3Bheight%3A%201em%3Bvertical-align%3A%20middle%3Bfill%3A%20currentColor%3Boverflow%3A%20hidden%3B%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200h1024v1024H0z%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220%22%20%2F%3E%3Cpath%20d%3D%22M546.432%20266.24a133.312%20133.312%200%200%201-133.12-133.12C413.312%2059.84%20472.96%200%20546.432%200c73.472%200%20133.12%2059.712%20133.12%20133.12%200%2073.472-59.648%20133.12-133.12%20133.12zM263.04%20372.096c-67.072%200-121.6-54.528-121.6-121.6%200-67.136%2054.528-121.664%20121.6-121.664%2067.136%200.064%20121.536%2054.464%20121.6%20121.6%200%2067.072-54.592%20121.664-121.6%20121.664z%20m-120.512%20275.2a107.328%20107.328%200%200%201%200-214.592%20107.328%20107.328%200%200%201%200%20214.528z%20m120.512%20272.576c-50.24-0.064-90.88-40.768-90.944-91.008a91.072%2091.072%200%200%201%2090.88-90.88c50.24%200%2090.88%2040.704%2090.944%2090.88%200%2050.176-40.768%2091.008-90.88%2091.008zM546.432%201024a79.488%2079.488%200%200%201%200-158.912%2079.488%2079.488%200%200%201%200%20158.912z%20m287.744-134.272a64.192%2064.192%200%200%201%200-128.256%2064.192%2064.192%200%200%201%200%20128.256z%20m117.888-296.704a52.672%2052.672%200%200%201%200-105.216%2052.672%2052.672%200%200%201%200%20105.216z%20m-158.72-338.688a40.832%2040.832%200%201%200%2081.728%200%2040.832%2040.832%200%200%200-81.664%200z%22%20fill%3D%22%23B4B4B4%22%20%2F%3E%3C%2Fsvg%3E");
      background-position: center;
      background-size:cover;
      animation: loading 1000ms linear infinite;
    }
    @keyframes loading {
      0%{
        transform:rotate(0deg);
      }
      100%{
        transform:rotate(360deg);
      }
    }
  }
</style>
